<template>
  <div class="risk clearFix">
    <div class="inquire-news c-shadow">
      <div class="listTab clearFix">
        <el-button-group>
          <el-button type="primary" v-for="(list,ind) in listTab" :key="ind" @click="changeList(list.type)" :class="{flag:list.flag}">{{list.name}}</el-button>
        </el-button-group>
      </div>
      <div class="risk-main clearFix">
        <input class="form-control fl" type="text" v-model="companyName" placeholder="请输入企业名称" @keyup.enter="goto" />
        <div class="publist-list-category fl" v-if="message === '预警'">
          <label>预警时间：</label>
          <j-select ref="selectDate" class="select" v-model="prewarningTime" :initItems="prewarningTimes" :selectedIndex="prewarningTimeIdx">
          </j-select>
          <!-- <el-select v-model="prewarningTime" ref="selectDate" class="select" disabled placeholder="近一个月">
            <el-option
              v-for="(item,ind) in prewarningTimes"
              :key="ind"
              :label="item"
              :value="item">
            </el-option>
          </el-select> -->
        </div>
        <div class="white-time publist-list-category fl" v-else>
          <div class="labelBox fl">
            <div class="mgr-50 date-picker fl">
              <label class="dataType fl">导入时间：</label>
              <j-date-picker v-model="startTime" :max="maxTime" @change="fliterChange"></j-date-picker>
              <span class="space-mark">-</span>
              <j-date-picker v-model="endTime" :min="startTime" :max="curTime" @change="fliterChange"></j-date-picker>
            </div>
          </div>
        </div>
        <el-button type="primary ent-button fr" plain @click="reset">重置</el-button>
        <el-button type="primary ent-button fr" @click="goto"><i class="iconfont icon-search ent-search"></i>检索</el-button>
      </div>
      <div class="warning-group clearFix">
        <p>风险类型：</p>
        <span @click="warnSelect(warn)" v-for="warn in prewarningTypes" :key="warn.name" :class="{sel:warn.sel}">{{warn.name}}</span>
      </div>
    </div>
    <div class="ent-monito c-shadow">
      <div class="ent-examine clearFix">
        <el-checkbox class="ent-monitoring fl" v-model="checked" @change="monitoring" v-show="cshow">只看重点监控企业</el-checkbox>
        <div class="publist-list-category fl" v-if="message === '预警'">
          <label>排序：</label>
          <j-select ref="selectSort" class="select" v-model="sortLabel" :initItems="sortLabels" :selectedIndex="sortIndex">
          </j-select>
        </div>
        <div class="publist-list-category fl" v-else>
          <label>排序：</label>
          <j-select ref="selectSort" class="select" v-model="sortLabel" :initItems="sortLabels1" :selectedIndex="sortIndex">
          </j-select>
        </div>
        <el-row class="fr">
          <a class="ent-derive fr" type="primary" plain @click="exportReport"><i class="iconfont icon-baobiao statement"></i>导出列表</a>
        </el-row>
      </div>
      <table class="table-fixed" width="100%" border="0" cellspacing="0" cellpadding="0">
        <thead>
          <th>
            <img src="../../assets/images/jiankongzhuangtai.png">
            监控状态</th>
          <th width="300px">
            <img src="../../assets/images/qiyemingcheng.png">
            企业名称</th>
          <th>
            <img src="../../assets/images/qiyemingcheng.png">
            企业标签</th>
          <th width="200px">
            <img src="../../assets/images/fenghuozhishu.png">
            烽火指数</th>
          <th>
            <img src="../../assets/images/fengxianyujing.png">
            风险类型</th>
          <th v-if="message === '预警'">
            <img src="../../assets/images/yujingshijian.png">
            预警时间</th>
          <th v-else>
            <img src="../../assets/images/yujingshijian.png">
            导入时间</th>
        </thead>
        <tr v-for="lists in list" :key="lists.risk">
          <td class="ent-emphasis" :class="{'color-40':lists.className === 4,'color-60':lists.className === 6,'color-80':lists.className === 8,'color-100':lists.className === 10}">
            <span>[{{regulatoryStatus[lists.controlStatus]}}]</span></td>
          <td>
          <!-- ,focusStatus:lists.focusStatus -->
          <router-link tag="a" target="_blank" :to="{name:'baseinfo', query: {entid:lists.id,entname:lists.entName}}">
            <span class="ent-name" :title="lists.entName">{{lists.entName}}</span>
          </router-link>
          </td>
          <td class="text-center">
            {{lists.entLabel || '--'}}
          </td>
          <td class="text-center hot-number" :class="{'color-40':lists.className === 4,'color-60':lists.className === 6,'color-80':lists.className === 8,'color-100':lists.className === 10}">{{lists.totalRiskScore}}</td>
          <td class="text-center" :title="lists.riskDescription">{{lists.riskDescription || '--'}}</td>
          <td class="text-center" v-if="message === '预警'">{{lists.stepDate5 | dateFormat}}</td>
          <td class="text-center" v-else>{{lists.importDate | dateFormat}}</td>
        </tr>
      </table>
      <j-no-data :mode="'b'" msg="b" v-if="list.length === 0"></j-no-data>
    </div>
    <div class="ent-warning fl">{{message}}<span class="ent-number">{{total}}</span>家企业</div>
    <div class="block paging-wrap fr">
      <el-pagination v-if="total>10"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listParams.pageNum"
        :page-size="listParams.pageSize"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 弹出层内容 -->
    <j-dialog class="feature_dialog" ref="exportDialog" :initTitle="initTitle">
      <label class="exportbb fl">报表名称</label>
      <el-input class="tezc fr" v-model="name" name="name" placeholder="" maxlength=""></el-input>
      <div class="baobiao" v-show="errMsg">{{errMsg}}</div>
      <div class="btn">
        <a class="save-btn" target="_blank" :href="exportSrc" @click="deleteById">确 定</a>
        <button class="cancle-btn" @click="close">取 消</button>
      </div>
    </j-dialog>
  </div>
</template>
<script>
import { jSelect, jDialog, jDatePicker, jNoData } from '../../components'
import { homepage as api } from '../../api'
export default {
  data() {
    return {
      entId: 0,
      entName: '',
      // 时间
      startTime: '',
      endTime: '',
      checked: false,
      list: [],
      message: '预警',
      listTab: [
        {
          name:'风险预警列表',
          flag: true,
          type:'isRisk'
        }, {
          name:'重点关注企业列表',
          flag: false,
          type:'focusStatus'
        }
      ],
      sortLabels: ['按预警时间', '按烽火指数'],
      sortLabels1: ['按导入时间', '按烽火指数'],
      sortLabelsMap: ['predictionDate', 'beaconValue'],
      sortLabelsMap1: ['importDate', 'beaconValue'],
      sortLabel: '',
      sortIndex: 0,
      prewarningTimeIdx: 0,
      prewarningTypeIdx: 0,
      prewarning: '近一个月',
      regulatoryStatus: ['一般监控', '重点监控', '设为安全', '已处理'],
      listParams: {
        pageNum: 1,
        pageSize: 10,
        isRisk: 1
      },
      total: 0,
      prewarningTime: '',
      prewarningType: [],
      prewarningTimes: ['近一个月', '近三个月', '近六个月', '近一年'],
      prewarningTimesMap: [1, 3, 6, 12],
      prewarningTypes: [
        { name: '全部', sel: true, flag: '' },
        { name: '经营风险', sel: false, flag: 'g' },
        { name: '舆情风险', sel: false, flag: 'q' },
        { name: '关联风险', sel: false, flag: 'd' },
        { name: '传播风险', sel: false, flag: 'e' }
      ],
      companyName: '',
      cshow: true,
      initTitle: '生成报表',
      errMsg: '',
      name: '',
      reportName: '',
      baseUrl: window.api_host + '/exportExcel/exportRiskEntListExcel?',
      exportParam: {},
      exportSrc: '',
      value: 0
    }
  },
  computed: {
    maxTime() {
      if ((new Date().valueOf() - new Date(this.endTime).valueOf()) > 0) {
        return this.endTime
      } else {
        return this.curTime
      }
    },
    curTime() {
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() > 9 ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))
      let day = date.getDate() > 9 ? date.getDate() : ('0' + date.getDate())
      return year + '-' + month + '-' + day
    }
  },
  watch: {
    prewarningTime(value) {
      var date = this.prewarningTimesMap[this.prewarningTimes.indexOf(value)]
      if (date) {
        this.listParams.predictionDate = date
        this.exportParam.predictionDate = date
      }
      this.listParams.pageNum = 1
      this.listParams.pageSize = 10
      this.exportSrc = this.baseUrl + this.jsonToparam(this.listParams)
      this.goto()
    },
    sortLabel(value) {
      let label = ''
      if (this.message === '预警') {
        label = this.sortLabelsMap[this.sortLabels.indexOf(value)]
      } else {
        label = this.sortLabelsMap1[this.sortLabels1.indexOf(value)]
      }
      if (label) {
        this.listParams.rank = label
      }
      this.listParams.pageNum = 1
      this.listParams.pageSize = 10
      this.exportSrc = this.baseUrl + this.jsonToparam(this.listParams)
      this.goto()
    },
    name(value) {
      if (value) {
        this.listParams.reportName = value
      } else {
        delete this.listParams.reportName
      }
      this.listParams.pageNum = 1
      this.listParams.pageSize = 10
      this.exportSrc = this.baseUrl + this.jsonToparam(this.listParams)
      this.goto()
    },
    companyName(value) {
      if (value) {
        this.exportParam.searchName = value
        this.listParams.searchName = value
      } else {
        delete this.exportParam.searchName
        delete this.listParams.searchName
      }
      this.listParams.pageNum = 1
      this.listParams.pageSize = 10
      this.exportSrc = this.baseUrl + this.jsonToparam(this.listParams)
      // this.goto()
    },
    checked(value) {
      this.value = value
      if (value) {
        this.listParams.controlStatus = +value
      } else {
        delete this.listParams.controlStatus
      }
      this.listParams.pageNum = 1
      this.listParams.pageSize = 10
      this.exportSrc = this.baseUrl + this.jsonToparam(this.listParams)
      this.goto()
    }
  },
  methods: {
    fliterChange() {
      if (this.startTime) {
        // console.log(this.startTime)
        this.listParams.beginImportDate = this.startTime + ' 00:00:00'
      }
      if (this.endTime) {
        // console.log(this.endTime)
        this.listParams.endImportDate = this.endTime + ' 23:59:59'
      }
      this.listParams.pageNum = 1
      this.listParams.pageSize = 10
      this.exportSrc = this.baseUrl + this.jsonToparam(this.listParams)
      // this.changedata()
      this.goto()
    },
    // 重点关注
    changeList(changeTo) {
      this.listParams = {
        pageNum:1,
        pageSize:10
      }
      this.message = changeTo === 'isRisk'?'预警':'重点关注'
      this.listTab.map(list => {
        list.flag = false
        if (list.type === changeTo) {
          list.flag = true
        }
      })
      if (changeTo === 'isRisk') {
        this.listParams.isRisk = 1
        delete this.listParams.focusStatus
        this.cshow = true
      } else if (changeTo === 'focusStatus') {
        this.listParams.focusStatus = 1
        delete this.listParams.isRisk
        this.cshow = false
      }
      let label = ''
      if (this.message === '预警') {
        this.listParams.predictionDate = 1
        delete this.listParams.beginImportDate
        delete this.listParams.endImportDate
        label = this.sortLabelsMap[this.sortLabels.indexOf(this.value)]
        this.$refs.selectSort.select({
          data: "按预警时间",
          selected: false,
          text: "按预警时间",
          value: "按预警时间"
        })
        this.listParams.rank = this.sortLabelsMap[this.sortLabels.indexOf(0)]
      } else {
        delete this.listParams.predictionDate
        delete this.listParams.beginImportDate
        delete this.listParams.endImportDate
        label = this.sortLabelsMap1[this.sortLabels1.indexOf(this.value)]
        this.$refs.selectSort.select({
          data: "按导入时间",
          selected: false,
          text: "按导入时间",
          value: "按导入时间"
        })
        this.listParams.rank = this.sortLabelsMap[this.sortLabels1.indexOf(0)]
      }
      if (this.$refs.selectDate) {
        this.$refs.selectDate.select({
          data: '近一个月',
          selected: false,
          text: '近一个月',
          value: '近一个月'
        })
      }
      if (label) {
        this.listParams.rank = label
      }
      this.companyName = ''
      this.warnSelect({ name: '全部', sel: true, noTrigger: true })
      this.prewarningTypes.map(list => {
        list.sel = false
      })
      this.prewarningTypes[0].sel = true
      this.startTime = ''
      delete this.listParams.beginImportDate
      this.endTime = ''
      delete this.listParams.endImportDate
      this.checked = false
      delete this.listParams.controlStatus
      // this.reset()
      this.listParams.pageNum = 1
      this.listParams.pageSize = 10
      this.exportSrc = this.baseUrl + this.jsonToparam(this.listParams)
      this.getList()
    },
    // 重置方法
    reset() {
      this.companyName = ''
      this.reportName = ''
      this.startTime = ''
      delete this.listParams.beginImportDate
      this.endTime = ''
      delete this.listParams.endImportDate
      // this.message = '预警'
      // console.log(this.message)
      if (this.message === '预警') {
        this.listTab[0].flag = true
        this.listTab[1].flag = false
        this.listParams.isRisk = 1
        delete this.listParams.focusStatus
        this.$refs.selectDate.select({
          data: '近一个月',
          selected: false,
          text: '近一个月',
          value: '近一个月'
        })
        this.$refs.selectSort.select({
          data: "按预警时间",
          selected: false,
          text: "按预警时间",
          value: "按预警时间"
        })
        this.listParams.rank = this.sortLabelsMap[this.sortLabels.indexOf(0)]
      } else {
        this.listTab[1].flag = true
        this.listTab[0].flag = false
        this.listParams.focusStatus = 1
        delete this.listParams.isRisk
        this.$refs.selectSort.select({
          data: "按导入时间",
          selected: false,
          text: "按导入时间",
          value: "按导入时间"
        })
        this.listParams.rank = this.sortLabelsMap[this.sortLabels1.indexOf(0)]
      }
      this.checked = false
      this.warnSelect({ name: '全部', sel: true, noTrigger: true })
      this.prewarningTypes.map(list => {
        list.sel = false
      })
      this.prewarningTypes[0].sel = true
      // this.listTab[0].flag = true
      // this.listTab[1].flag = false
      this.listParams = {
        pageNum: 1,
        pageSize: 10
      }
      // this.listParams.isRisk = 1
      // delete this.listParams.focusStatus
      // 重点监控取消
      this.checked = false
      delete this.listParams.controlStatus
      this.listParams.rank = 'predictionDate'
      this.listParams.predictionType = 1
      this.exportSrc = this.baseUrl + this.jsonToparam(this.listParams)
      this.getList()
    },
    // 预警原因标签选择
    warnSelect(warn) {
      if (warn.name === '全部' && warn.sel === false) {
        this.prewarningTypes.forEach(item => {
          item.sel = false
          if (item.name === warn.name) {
            item.sel = true
          }
        })
        this.prewarningType = []
        if (this.listParams.riskDescription) {
          delete this.listParams.riskDescription
        }
        if (this.exportParam.riskDescription) {
          delete this.exportParam.riskDescription
        }
        this.exportSrc = this.baseUrl + this.jsonToparam(this.listParams)
        this.goto()
        return false
      } else if (warn.name === '全部') {
        this.prewarningTypes.forEach(item => {
          item.sel = false
        })
        this.prewarningType = []
        if (this.listParams.riskDescription) {
          delete this.listParams.riskDescription
        }
        if (this.exportParam.riskDescription) {
          delete this.exportParam.riskDescription
        }
        this.exportSrc = this.baseUrl + this.jsonToparam(this.listParams)
        if (warn.noTrigger) return false
        this.goto()
        return false
      }
      let middleArr = []
      this.prewarningTypes.forEach(item => {
        if (item.name === warn.name) {
          item.sel = !item.sel
        }
        if (item.name === '全部') {
          item.sel = false
        }
        if (item.sel && item.name !== '') {
          middleArr.push(item.name)
        }
      })
      this.prewarningType = middleArr
      this.exportParam.riskDescription = this.listParams.riskDescription = this.prewarningType.join(
        ','
      )
      if (this.exportParam.riskDescription === '') {
        delete this.exportParam.riskDescription
      }
      if (this.listParams.riskDescription === '') {
        delete this.listParams.riskDescription
      }
      this.listParams.pageNum = 1
      this.listParams.pageSize = 10
      this.exportSrc = this.baseUrl + this.jsonToparam(this.listParams)
      this.goto()
    },
    // 格式化导出报告需要的参数
    jsonToparam(obj) {
      let str = ''
      for (let key in obj) {
        let param = key + '=' + obj[key] + '&'
        str += param
      }
      return str.slice(0, str.length - 1)
    },
    // 根据烽火值得到颜色类名
    hotNumberToClass(num) {
      if (+num >= 80) {
        return 10
      } else if (+num >= 60) {
        return 8
      } else if (+num >= 40) {
        return 6
      } else {
        return 4
      }
    },
    // 获取列表
    getList() {
      let _this = this
      let label = ''
      if (this.message === '预警') {
        this.listTab[0].flag = true
        this.listTab[1].flag = false
        this.listParams.isRisk = 1
        delete this.listParams.focusStatus
        label = this.sortLabelsMap[this.sortLabels.indexOf(this.value)]
        this.cshow = true
      } else {
        this.listTab[1].flag = true
        this.listTab[0].flag = false
        this.listParams.focusStatus = 1
        delete this.listParams.isRisk
        label = this.sortLabelsMap1[this.sortLabelsMap1.indexOf(this.value)]
        this.cshow = false
        delete this.listParams.controlStatus
      }
      if (label) {
        this.listParams.rank = label
      }
      this.exportSrc = this.baseUrl + this.jsonToparam(this.listParams)
      api
        .getRiskList(_this.listParams)
        .then(rtn => {
          _this.list = rtn.data.list
          _this.total = rtn.data.total
          _this.list.map((item, ind) => {
            item.className = this.hotNumberToClass(item.totalRiskScore)
          })
        })
        .catch(err => {
          _this.pageState = err
        })
    },
    // 检索
    goto() {
      let params = {}
      this.listParams.pageNum = 1
      this.listParams.pageSize = 10
      this.listParams = Object.assign(this.listParams, params)
      this.getList()
    },
    // 重点监控企业
    monitoring() {
      if (this.checked) {
        this.listParams.controlStatus = 1
      } else {
        delete this.listParams.controlStatus
      }
      this.listParams.pageNum = 1
      this.listParams.pageSize = 10
      this.exportSrc = this.baseUrl + this.jsonToparam(this.listParams)
      this.getList()
    },
    // 报表导出
    exportReport() {
      this.name = ''
      this.$refs.exportDialog.show = true
    },
    deleteById() {
      this.$refs.exportDialog.show = false
    },
    close() {
      this.$refs.exportDialog.show = false
    },
    handleSizeChange() {},
    // 当切换页码的时候出发的函数
    handleCurrentChange(index) {
      this.listParams.pageNum = index
      this.getList()
    }
  },
  mounted() {
    this.entname = this.$route.query.entname
    this.exportParam.token = this.$store.state.user.userInfo.token
    this.listParams.token = this.$store.state.user.userInfo.token
    // if (!this.$store.state.user.userInfo.token) {
    //   let data = this.$router.resolve({name:'login'})
    //   window.open(data.href)
    // }
  },
  components: {
    jSelect,
    jDialog,
    jDatePicker,
    jNoData
  }
}
</script>
<style lang="scss" scoped>
// 烽火值颜色
.color-40{
  color: #49B0FD;
}
.color-60 {
  color: #5ad28a;
}
.color-80 {
  color: #f29611;
}
.color-100 {
  color: #ff3000;
}
.hot-number {
  font-size: 20px;
  font-weight: bold;
}
.rela {
  position: relative;
  .skewq {
    z-index: 2;
  }
}
.skew {
  position: absolute;
  font-size: 14px;
  left: 12px;
  top: -5px;
  color: #ccc;
  transform: skew(125deg,25deg) !important;
  z-index: 1;
  }
.risk {
  width: 100%;
  .publist-list-category {
    margin-left: 60px;
    .mgr-50 {
      label {
        margin: 10px 0;
      }
    }
    label {
      color: #999;
      font-size: 14px;
    }
  }
  .inquire-news {
    width: 100%;
    margin: 20px 0px;
    // height: 98px;
    background: #fff;
    border-radius: 5px;
    .warning-group {
      padding: 0 0 30px 40px;
      height: 40px;
      p {
        color: #bfbfbf;
        float: left;
        padding: 5px 15px;
        margin-right: 20px;
      }
      span {
        float: left;
        padding: 5px 15px;
        border: 1px solid #e2f1ff;
        background: #e2f1ff;
        color: #24a5ff;
        border-radius: 5px;
        cursor: pointer;
        &.sel {
          color: #ff7200;
          background: #ffe5ce;
          border: 1px solid #ffe5ce;
        }
      }
      span + span {
        margin-left: 30px;
      }
    }
    .listTab {
      // padding: 32px 40px 0 40px;
      padding: 32px 0 0 40px;
      button {
        color: #409EFF;
        background: #ecf5ff;
        border-color: #b3d8ff;
      }      
      .flag {
        background: #409EFF !important;
        color: #fff !important;
        border-color: #b3d8ff;
      }
    }
    .risk-main {
      padding: 32px 40px;
      .form-control {
        width: 298px;
        height: 36px;
        font-size: 14px;
        color: #000;
        border: 1px solid #d9d9d9;
        border-radius: 6px;
      }
      input::-webkit-input-placeholder {
        color: #a6aeb8;
      }
      .ent-button {
        width: 131px;
        height: 34px;
        font-size: 14px;
        line-height: 8px;
        margin: 1px 0 0 41px;
        // background: -webkit-linear-gradient(left, #f7a500, #ff7d1a);
        // background: -o-linear-gradient(left, #f7a500, #ff7d1a);
        // background: -moz-linear-gradient(left, #f7a500, #ff7d1a);
        // background: -ms-linear-gradient(left, #f7a500, #ff7d1a);
      }
      .ent-search {
        margin-right: 8px;
      }
    }
  }
  .ent-monito {
    width: 100%;
    padding: 0px 0px 32px;
    background: #fff;
    height: auto;
    border-radius: 5px;
    .ent-examine {
      padding: 30px 40px;
      .ent-monitoring {
        margin-top: 11px;
      }
      .ent-derive {
        width: 136px;
        height: 34px;
        line-height: 34px;
        color: #fff;
        background: #379aff;
        text-align: center;
        border-radius: 5px;
      }
      .statement {
        margin-right: 8px;
      }
    }
    .table-fixed {
      width: 94%;
      margin: 0 3%;
      border-radius: 5px;
      font-size: 14px !important;
      line-height: 40px;
      text-align: center;
      th {
        font-weight: bold;
        background: #379aff;
        justify-content: center;
        font-size: 15px !important;
        color: #fff;
        img {
          height: 14px;
          width: 14px;
        }
      }
      a {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .ent-emphasis {
        // color: #ef5a09;
        text-align: center;
      }
      .ent-name {
        color: #379aff;
        // margin-left: -3px;
        cursor: pointer;
      }
    }
  }
  .ent-warning {
    font-size: 14px;
    color: #999;
    margin-top: 23px;
    .ent-number {
      color: #40a1f3;
      font-weight: bold;
    }
  }
}
// 弹出层
.feature_dialog {
  width: 545px;
  .exportbb {
    margin: 50px 0 20px 10px;
  }
  .tezc {
    width: 398px;
    margin-bottom: 15px;
  }
  .el-input {
    display: block;
    margin: 40px 15px 30px;
  }
  .baobiao {
    clear: both;
    display: block;
    margin-bottom: 28px;
    color: #ff4242;
    text-align: center;
  }
  .btn {
    text-align: center;
    a {
      color: #fff;
      width: 111px;
      height: 34px;
      line-height: 34px;
      display: inline-block;
      background: #3f8ffa;
      border: 1px solid #9dc5fd;
      border-radius: 5px;
      font-size: 14px;
    }
  }
}
</style>



// WEBPACK FOOTER //
// src/view/home/homepage.vue